<template>
  <div class="secondTabs">
    <div :class="{ secondTab: true, active: isActive === index }" v-for="(item, index) in tabList" :key="item.id"
      @click="changeActive(index)">{{ item.name }}
    </div>
    <choose-year></choose-year>
  </div>
</template>

<script>
import ChooseYear from './choostTime/ChooseYear'
import { getChangeDate } from '../../component/choostTime/getTime'
import { mapGetters } from 'vuex'
export default {
  name: 'SecondTab',
  components: {
    ChooseYear
  },
  data() {
    return {
      tabList: [
        { id: 1, name: '昨日' },
        { id: 2, name: '本旬' },
        { id: 3, name: '本月' },
        { id: 4, name: '本年' }
      ],
      isActive: ''
    }
  },
  computed: {
    ...mapGetters(['show', 'timeActive'])
  },
  watch: {
    show: {
      handler() {
        this.isActive = ''
      }
    }
  },
  mounted() {
    this.isActive = this.timeActive
  },
  methods: {
    changeActive(index) {
      this.isActive = index
      const { startData, endData } = getChangeDate(index)
      this.$store.commit('SETDETAILTIME', { startData, endData })
    }
  }
}
</script>

<style lang="less" scoped>
.secondTabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .2rem 0.3rem 0.3rem;
  /*z-index: 9999;*/
  /*position: fixed;*/
  /*width: 100%;*/
  /*background: #fff;*/
  /*top: 0;*/
  /*left: 0;*/


  .secondTab {
    font-size: 0.28rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: 0.42rem;

    &.active {
      color: #4375C9;
    }
  }

  .theTimeCon {
    display: flex;

    .range {
      line-height: 0.6rem;
      margin: 0 0.1rem;
      color: #999999;
      font-weight: 400;
      font-size: 0.30rem
    }

    .theDate {
      width: 1.8rem;
      height: 0.6rem;
      font-size: 0.26rem;
      text-align: center;
      font-weight: 400;
      line-height: 0.56rem;
      color: #666666;
      background: #f6f6f6;
      border-radius: 0.12rem;
      border: 0.01rem solid #cbcbcb;
    }
  }
}
</style>
